import React from "react";

import Home from "./Home";
import MyNav from "./MyNav";
import StateCom from "./StateCom";
import LifeCom from "./LifeCom";
import SetStateDemo from "./SetStateDemo";
import IfDemo from "./IfDemo";
import ListKey from "./ListKey";
import FormDemo from "./FormDemo";
import RefsAndDom from "./RefsAndDom";
import RefsForm from "./RefsForm";
import ShareStateParent from "./compontens/ShareStateParent";
import Componse from "./Componse";
import PropsTypeDemo from "./PropsTypeDemo";

// 用类的形式集成组件 Hook形式也能创建
class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      title: "父传子",
    };
  }

  clickTitle = (data) => {
    console.log(data);
    this.setState({ title: data });
  };

  // 渲染函数
  render() {
    const nav1 = ["首页", "学习", "时评"];
    const nav2 = ["web", "react", "node"];

    return (
      <>
        <h1>hello React Component</h1>
        <h2>组件</h2>
        <Home />
        <MyNav nav={nav1} title={"导航"} />
        <MyNav nav={nav2} title={"学习导航"} />
        <br />
        <StateCom></StateCom>
        <LifeCom
          title={this.state.title}
          clickTitles={this.clickTitle}
        ></LifeCom>
        <br />
        {/* 箭头函数的形式传参 */}
        <button onClick={() => this.clickTitle("父亲数据2")}>
          修改title父组件
        </button>
        {/* 在构造函数中绑定函数  this.clickTitle = this.clickTitle.bind(this); */}
        {/*<button onClick={this.clickTitle("父亲数据3")}>修改title父组件2</button>*/}
        <br />
        <SetStateDemo></SetStateDemo>
        <br />
        <IfDemo></IfDemo>
        <br />
        <ListKey></ListKey>
        <br />
        <FormDemo></FormDemo>
        <br />
        <RefsAndDom></RefsAndDom>
        <br />
        <RefsForm></RefsForm>
        <br />
        <ShareStateParent></ShareStateParent>
        <br />
        <Componse>
          <p>我是组合效果</p>
        </Componse>
        <br />
        <PropsTypeDemo title={"标题:我是类型检查"}></PropsTypeDemo>
          <PropsTypeDemo></PropsTypeDemo>
      </>
    );
  }
}

export default App;
